function ComplexCustomOverlay(point, html) {
  this._point = point
  this._html = html
}
ComplexCustomOverlay.prototype = new BMap.Overlay()
ComplexCustomOverlay.prototype.initialize = function(map) {
  this._map = map
  var div = (this._div = document.createElement('div'))
  div.setAttribute('class', 'marker')
  div.innerHTML = this._html

  this._map.getPanes().labelPane.appendChild(div)
  return div
}
ComplexCustomOverlay.prototype.draw = function() {
  var map = this._map
  var pixel = map.pointToOverlayPixel(this._point)
  this._div.style.left = pixel.x + 'px'
  this._div.style.top = pixel.y + 'px'
}
import config from '@/defaultSettings'
export default {
  data() {
    return {
      map: null,
      mncMap: {
        '00': 'yidong',
        '01': 'liantong',
        '03': 'dianxin'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawMap()
    })
    let mapHeight = window.innerHeight
    document.getElementById('map').style.height = `${mapHeight}px`
    window.onresize = function() {
      let winHeight = window.innerHeight
      document.getElementById('map').style.height = `${winHeight}px`
    }
  },
  methods: {
    drawMap() {
      const _this = this
      _this.map = new BMap.Map('map', { maxZoom: 18 })
      // _this.map.centerAndZoom(new BMap.Point(125.35, 43.88), 12)
      _this.map.centerAndZoom(new BMap.Point(config.initLng, config.initLat), 12)
      _this.map.enableScrollWheelZoom()
      _this.map.enableAutoResize() //启用自动适应容器尺寸变化
    },
    // 根本数据输出标准轨迹
    drawTaskDetailsDrawer(data) {
      // this.isLoading = false // 隐藏查询提示
      const colors = ['red', 'blue', 'green', 'violet', 'deongaree', 'orange']
      this.getRepeatPointer(data)
      this.map.clearOverlays()
      data.forEach((item, index) => {
        this.drawOverlay(item.list, colors[index])
        // 匹配到的轨迹标注序号
        // if (index !== 0) {
        //   const point = new BMap.Point(item.list[0].longitude, item.list[0].latitude)
        //   const html = `<span class="tip ${colors[index]}">${item.key + 1}号轨迹</span>`
        //   const myCompOverlay = new ComplexCustomOverlay(point, html)
        //   this.map.addOverlay(myCompOverlay)
        // }
      })
      this.panTo(data[data.length - 1].list, 0)
    },
    getRepeatPointer(data) {
      let latitudeLongitude = []
      let isRepeatLaLoList = []
      data.forEach((item, index) => {
        if (index !== 0) {
          item.list.forEach(v => {
            let s = Number(v.latitude) + ',' + Number(v.longitude)
            if (latitudeLongitude.includes(s)) {
              isRepeatLaLoList.push(s)
              return
            }
            latitudeLongitude.push(s)
          })
        }
      })
      let l = []
      let repeatLineList = []
      data.forEach((item, index) => {
        if (index !== 0) {
          item.list.forEach((v, i2) => {
            v.listIndex = index
            let s = Number(v.latitude) + ',' + Number(v.longitude)
            if (isRepeatLaLoList.includes(s)) {
              let i = isRepeatLaLoList.indexOf(s)
              let time = new Date(v.arriveTime).Format('yyyy-MM-dd hh:mm:ss')
              v.isRepeat = true
              if (l.map(v1 => v1.index).includes(i)) {
                let y = l.map(v2 => v2.index).indexOf(i)
                // v.text = l[y].text + `\n【${i2 + 1}】${v.phone} ${index}号轨迹点 经过时间 ${time}`
                v.text = l[y].text + `\n ${v.phone} ${index}号轨迹点 经过时间 ${time}`
                v.index = l[y].index
                v.flag = v.flag || l[y].flag
                if (v.listIndex !== l[y].listIndex) {
                  v.repeatLine = true
                  repeatLineList.push(s)
                }
                l[y] = Object.assign({}, v)
                return
              }
              l.push({
                index: i,
                text: ` ${v.phone}  ${index}号轨迹点 经过时间 ${time}`,
                flag: v.flag,
                listIndex: v.listIndex
              })
              v.text = ` ${v.phone}  ${index}号轨迹点 经过时间 ${time}`
            }
          })
        }
      })
      data.forEach((item, index) => {
        if (index !== 0) {
          item.list.forEach(v => {
            let s = Number(v.latitude) + ',' + Number(v.longitude)
            if (repeatLineList.includes(s)) {
              v.repeatLine = true
            }
          })
        }
      })
    },
    drawOverlay(data, type) {
      this.addLine(data, type)
      this.addMarker(data, type)
    },
    addLine(data, type) {
      const colors = {
        red: '#d91f1b',
        blue: '#009dd9',
        // blue: "#2F98F4",
        green: '#48bb00',
        violet: '#762bd0',
        deongaree: '#1921b3',
        orange: 'orange'
      }
      let line = []
      data.forEach((item, index) => {
        line.push(new BMap.Point(item.longitude, item.latitude))
      })
      var polyline = new BMap.Polyline(line, {
        strokeColor: colors[type],
        strokeWeight: 2.5,
        strokeOpacity: 0.8
      }) // 创建折线
      this.map.addOverlay(polyline) // 增加折线
    },
    addMarker(data, type) {
      data.forEach((item, index) => {
        const mnc = this.mncMap[item.mnc]
        const point = new BMap.Point(item.longitude, item.latitude)
        // const html = `<span class="sign ${item.flag ? 'orange' : type}" style="background-image: url("../../assets/images/${mnc}_${type}.png")">${index + 1}</span>`
        let html = `<span class="index${index} sign${mnc ? '' : ' red'} ${
          item.elapsedEndTime ? type : !item.flag ? mnc + '_black' : mnc + '_' + type
        }"></span><span class="sign_text ${type}_color">${index + 1}</span>`
        if (item.repeatLine) {
          html = `<span class="saojiao"></span>`
        }
        // console.log(html)
        // html += item.repeatLine ? `<span class="saojiao" longitude=${item.longitude} latitude=${item.latitude} text='${item.text}'></span>` : ''
        const myCompOverlay = new ComplexCustomOverlay(point, html)
        let marker = new BMap.Marker(point)
        this.map.addOverlay(marker)
        this.map.addOverlay(myCompOverlay)
        let label
        if (item.alarmTime) {
          label = new BMap.Label(
            '<div class="markerTipBox">' +
              '<p>序号：' +
              (item.key + 1) +
              '</p>' +
              '<p>姓名/代号：' +
              item.codeName +
              '</p>' +
              '<p>手机号码：' +
              item.phone +
              '</p>' +
              '<p>出现时间：' +
              item.alarmTime +
              '</p></div>',
            {
              offset: new BMap.Size(20, -110)
            }
          )
        } else if (item.position) {
          //人物画像(职住区域)
          label = new BMap.Label(
            '<div class="markerTipBox"><p>' +
              '序号:' +
              (item.key + 1) +
              '</p><p>' +
              '位置:' +
              item.position +
              '</p><p>' +
              '经度:' +
              item.longitude +
              '</p><p>' +
              '纬度:' +
              item.latitude,
            {
              offset: new BMap.Size(20, -110)
            }
          )
        } else if (item.appearTime) {
          //最新位置，历史轨迹，密文情报
          label = new BMap.Label(
            '<div class="markerTipBox"><p>' +
              '序号:' +
              (item.key + 1) +
              '</p><p>' +
              '时间：' +
              item.appearTime +
              '</p><p>' +
              '位置：' +
              item.address +
              '</p><p>' +
              '经度：' +
              item.longitude +
              '</p><p>' +
              '纬度：' +
              item.latitude,
            {
              offset: new BMap.Size(20, -110)
            }
          )
        } else {
          //默认
          label = new BMap.Label(
            '<div class="markerTipBox"><p>' +
              '序号:' +
              (item.key + 1) +
              '</p><p>' +
              '经度:' +
              item.longitude +
              '</p><p>' +
              '纬度:' +
              item.latitude,
            {
              offset: new BMap.Size(20, -110)
            }
          )
        }
        marker.setLabel(label)
        // pointArray[i] = new BMap.Point(points[i].lon, points[i].lat);
        // 初始化不显示
        label.setStyle({
          display: 'none'
        })
        // 鼠标经过时
        marker.addEventListener('mouseover', function(e) {
          var label = this.getLabel()
          label.setStyle({
            display: 'block'
          })
        })
        // 鼠标离开时
        marker.addEventListener('mouseout', function(e) {
          var label = this.getLabel()
          label.setStyle({
            display: 'none'
          })
        })
      })
    },
    panTo(data, key) {
      const target = data.filter(item => key === item.key)[0]
      target && this.map.panTo(new BMap.Point(target.longitude, target.latitude))
    }
  }
}
